<template>
    <div>
        <h3>{{detailList.title}}</h3>

        <section class="mineMessage">
            <van-col span="3">
                <img :src="detailList.avatar" alt="">
            </van-col>
            <van-col span="15" offset="1">
                <van-skeleton title avatar :row="3" :loading="loading">
                    {{detailList.userName}}
                    <br>
                    {{detailList.createTime}}
                </van-skeleton>


            </van-col>
            <van-col span="5"><van-button type="info">+关注</van-button></van-col>
        </section>
        <section class="detail">
            {{detailList.intro}}
            <img :src="detailList.coverImgUrl" alt="">
        </section>

    </div>
</template>

<script>
    import {detailList} from "../api/api";


    // this.$route.query.postsId
    export default {
        name: "DetailContent",
        data(){
          return {
              detailList : '',
              loading: true,
          }
        },
        created() {
            detailList(this.$route.query.postsId).then(res => {
                console.log(res.data)
                console.log(res.data.data)
                this.detailList = res.data.data
            })

        },
        mounted() {
            this.loading = false;
        },

    }

</script>

<style scoped>
    .mineMessage>div:nth-child(1){
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
    }
    .mineMessage img{
        width: 100%;
        height: 100%;
    }
    .van-button--info{
        width: 100%;
        height: 36px;
    }
    .mineMessage{
        overflow: hidden;
    }
    >>>.detail{
        margin-top: 10px;
    }
    .detail>img{
        margin-top: 10px;
        width: 100%;
    }
</style>